﻿<div class="card">
  <div class="card-heading">
    <h2>颜色表</h2>
    <small>
        工匠风格是一个具有创新用户体验规范的视觉语言（UX）和用户界面（UI）元素。主题通过色彩、色调、对比度来传达意义，类似如何布局传达的意义通过方法和路线。
        这一段不知道怎么翻译啦，不重要啦，随便看看，附上原文：<br />
        Material Design is a visual language with specifications for innovative user experiences (UX) and user interface (UI) elements. Themes convey meaning through color, tones, and contrasts, similar to how Layouts convey meaning through keylines and alignments.
    </small>
  </div>
  <div class="card-body">
    <div class="row no-gutter m-b-lg">
      <div class="col-sm-3">
        <div class="wrapper-sm red-500">
          <div class="m-b-lg">Red</div>
          @red-500
        </div>
        <div class="wrapper-sm red-50">@red-50</div>
        <div class="wrapper-sm red-100">@red-100</div>
        <div class="wrapper-sm red-200">@red-200</div>
        <div class="wrapper-sm red-300">@red-300</div>
        <div class="wrapper-sm red-400">@red-400</div>
        <div class="wrapper-sm red-500">@red-500</div>
        <div class="wrapper-sm red-600">@red-600</div>
        <div class="wrapper-sm red-700">@red-700</div>
        <div class="wrapper-sm red-800">@red-800</div>
        <div class="wrapper-sm red-900">@red-900</div>
        <div class="wrapper-sm red-A100">@red-A100</div>
        <div class="wrapper-sm red-A200">@red-A200</div>
        <div class="wrapper-sm red-A400">@red-A400</div>
        <div class="wrapper-sm red-A700">@red-A700</div>
      </div>
      <div class="col-sm-3">
        <div class="wrapper-sm pink-500">
          <div class="m-b-lg">pink</div>
          @pink-500
        </div>
        <div class="wrapper-sm pink-50">@pink-50</div>
        <div class="wrapper-sm pink-100">@pink-100</div>
        <div class="wrapper-sm pink-200">@pink-200</div>
        <div class="wrapper-sm pink-300">@pink-300</div>
        <div class="wrapper-sm pink-400">@pink-400</div>
        <div class="wrapper-sm pink-500">@pink-500</div>
        <div class="wrapper-sm pink-600">@pink-600</div>
        <div class="wrapper-sm pink-700">@pink-700</div>
        <div class="wrapper-sm pink-800">@pink-800</div>
        <div class="wrapper-sm pink-900">@pink-900</div>
        <div class="wrapper-sm pink-A100">@pink-A100</div>
        <div class="wrapper-sm pink-A200">@pink-A200</div>
        <div class="wrapper-sm pink-A400">@pink-A400</div>
        <div class="wrapper-sm pink-A700">@pink-A700</div>
      </div>
      <div class="col-sm-3">
        <div class="wrapper-sm purple-500">
          <div class="m-b-lg">purple</div>
          @purple-500
        </div>
        <div class="wrapper-sm purple-50">@purple-50</div>
        <div class="wrapper-sm purple-100">@purple-100</div>
        <div class="wrapper-sm purple-200">@purple-200</div>
        <div class="wrapper-sm purple-300">@purple-300</div>
        <div class="wrapper-sm purple-400">@purple-400</div>
        <div class="wrapper-sm purple-500">@purple-500</div>
        <div class="wrapper-sm purple-600">@purple-600</div>
        <div class="wrapper-sm purple-700">@purple-700</div>
        <div class="wrapper-sm purple-800">@purple-800</div>
        <div class="wrapper-sm purple-900">@purple-900</div>
        <div class="wrapper-sm purple-A100">@purple-A100</div>
        <div class="wrapper-sm purple-A200">@purple-A200</div>
        <div class="wrapper-sm purple-A400">@purple-A400</div>
        <div class="wrapper-sm purple-A700">@purple-A700</div>
      </div>
      <div class="col-sm-3">
        <div class="wrapper-sm deep-purple-500">
          <div class="m-b-lg">deep-purple</div>
          @deep-purple-500
        </div>
        <div class="wrapper-sm deep-purple-50">@deep-purple-50</div>
        <div class="wrapper-sm deep-purple-100">@deep-purple-100</div>
        <div class="wrapper-sm deep-purple-200">@deep-purple-200</div>
        <div class="wrapper-sm deep-purple-300">@deep-purple-300</div>
        <div class="wrapper-sm deep-purple-400">@deep-purple-400</div>
        <div class="wrapper-sm deep-purple-500">@deep-purple-500</div>
        <div class="wrapper-sm deep-purple-600">@deep-purple-600</div>
        <div class="wrapper-sm deep-purple-700">@deep-purple-700</div>
        <div class="wrapper-sm deep-purple-800">@deep-purple-800</div>
        <div class="wrapper-sm deep-purple-900">@deep-purple-900</div>
        <div class="wrapper-sm deep-purple-A100">@deep-purple-A100</div>
        <div class="wrapper-sm deep-purple-A200">@deep-purple-A200</div>
        <div class="wrapper-sm deep-purple-A400">@deep-purple-A400</div>
        <div class="wrapper-sm deep-purple-A700">@deep-purple-A700</div>
      </div>
    </div>
    <div class="row no-gutter m-b-lg">
      <div class="col-sm-3">
        <div class="wrapper-sm indigo-500">
          <div class="m-b-lg">indigo</div>
          @indigo-500
        </div>
        <div class="wrapper-sm indigo-50">@indigo-50</div>
        <div class="wrapper-sm indigo-100">@indigo-100</div>
        <div class="wrapper-sm indigo-200">@indigo-200</div>
        <div class="wrapper-sm indigo-300">@indigo-300</div>
        <div class="wrapper-sm indigo-400">@indigo-400</div>
        <div class="wrapper-sm indigo-500">@indigo-500</div>
        <div class="wrapper-sm indigo-600">@indigo-600</div>
        <div class="wrapper-sm indigo-700">@indigo-700</div>
        <div class="wrapper-sm indigo-800">@indigo-800</div>
        <div class="wrapper-sm indigo-900">@indigo-900</div>
        <div class="wrapper-sm indigo-A100">@indigo-A100</div>
        <div class="wrapper-sm indigo-A200">@indigo-A200</div>
        <div class="wrapper-sm indigo-A400">@indigo-A400</div>
        <div class="wrapper-sm indigo-A700">@indigo-A700</div>
      </div>
      <div class="col-sm-3">
        <div class="wrapper-sm blue-500">
          <div class="m-b-lg">blue</div>
          @blue-500
        </div>
        <div class="wrapper-sm blue-50">@blue-50</div>
        <div class="wrapper-sm blue-100">@blue-100</div>
        <div class="wrapper-sm blue-200">@blue-200</div>
        <div class="wrapper-sm blue-300">@blue-300</div>
        <div class="wrapper-sm blue-400">@blue-400</div>
        <div class="wrapper-sm blue-500">@blue-500</div>
        <div class="wrapper-sm blue-600">@blue-600</div>
        <div class="wrapper-sm blue-700">@blue-700</div>
        <div class="wrapper-sm blue-800">@blue-800</div>
        <div class="wrapper-sm blue-900">@blue-900</div>
        <div class="wrapper-sm blue-A100">@blue-A100</div>
        <div class="wrapper-sm blue-A200">@blue-A200</div>
        <div class="wrapper-sm blue-A400">@blue-A400</div>
        <div class="wrapper-sm blue-A700">@blue-A700</div>
      </div>
      <div class="col-sm-3">
        <div class="wrapper-sm light-blue-500">
          <div class="m-b-lg">light-blue</div>
          @light-blue-500
        </div>
        <div class="wrapper-sm light-blue-50">@light-blue-50</div>
        <div class="wrapper-sm light-blue-100">@light-blue-100</div>
        <div class="wrapper-sm light-blue-200">@light-blue-200</div>
        <div class="wrapper-sm light-blue-300">@light-blue-300</div>
        <div class="wrapper-sm light-blue-400">@light-blue-400</div>
        <div class="wrapper-sm light-blue-500">@light-blue-500</div>
        <div class="wrapper-sm light-blue-600">@light-blue-600</div>
        <div class="wrapper-sm light-blue-700">@light-blue-700</div>
        <div class="wrapper-sm light-blue-800">@light-blue-800</div>
        <div class="wrapper-sm light-blue-900">@light-blue-900</div>
        <div class="wrapper-sm light-blue-A100">@light-blue-A100</div>
        <div class="wrapper-sm light-blue-A200">@light-blue-A200</div>
        <div class="wrapper-sm light-blue-A400">@light-blue-A400</div>
        <div class="wrapper-sm light-blue-A700">@light-blue-A700</div>
      </div>
      <div class="col-sm-3">
        <div class="wrapper-sm cyan-500">
          <div class="m-b-lg">cyan</div>
          @cyan-500
        </div>
        <div class="wrapper-sm cyan-50">@cyan-50</div>
        <div class="wrapper-sm cyan-100">@cyan-100</div>
        <div class="wrapper-sm cyan-200">@cyan-200</div>
        <div class="wrapper-sm cyan-300">@cyan-300</div>
        <div class="wrapper-sm cyan-400">@cyan-400</div>
        <div class="wrapper-sm cyan-500">@cyan-500</div>
        <div class="wrapper-sm cyan-600">@cyan-600</div>
        <div class="wrapper-sm cyan-700">@cyan-700</div>
        <div class="wrapper-sm cyan-800">@cyan-800</div>
        <div class="wrapper-sm cyan-900">@cyan-900</div>
        <div class="wrapper-sm cyan-A100">@cyan-A100</div>
        <div class="wrapper-sm cyan-A200">@cyan-A200</div>
        <div class="wrapper-sm cyan-A400">@cyan-A400</div>
        <div class="wrapper-sm cyan-A700">@cyan-A700</div>
      </div>
    </div>
    <div class="row no-gutter m-b-lg">
      <div class="col-sm-3">
        <div class="wrapper-sm teal-500">
          <div class="m-b-lg">teal</div>
          @teal-500
        </div>
        <div class="wrapper-sm teal-50">@teal-50</div>
        <div class="wrapper-sm teal-100">@teal-100</div>
        <div class="wrapper-sm teal-200">@teal-200</div>
        <div class="wrapper-sm teal-300">@teal-300</div>
        <div class="wrapper-sm teal-400">@teal-400</div>
        <div class="wrapper-sm teal-500">@teal-500</div>
        <div class="wrapper-sm teal-600">@teal-600</div>
        <div class="wrapper-sm teal-700">@teal-700</div>
        <div class="wrapper-sm teal-800">@teal-800</div>
        <div class="wrapper-sm teal-900">@teal-900</div>
        <div class="wrapper-sm teal-A100">@teal-A100</div>
        <div class="wrapper-sm teal-A200">@teal-A200</div>
        <div class="wrapper-sm teal-A400">@teal-A400</div>
        <div class="wrapper-sm teal-A700">@teal-A700</div>
      </div>
      <div class="col-sm-3">
        <div class="wrapper-sm green-500">
          <div class="m-b-lg">green</div>
          @green-500
        </div>
        <div class="wrapper-sm green-50">@green-50</div>
        <div class="wrapper-sm green-100">@green-100</div>
        <div class="wrapper-sm green-200">@green-200</div>
        <div class="wrapper-sm green-300">@green-300</div>
        <div class="wrapper-sm green-400">@green-400</div>
        <div class="wrapper-sm green-500">@green-500</div>
        <div class="wrapper-sm green-600">@green-600</div>
        <div class="wrapper-sm green-700">@green-700</div>
        <div class="wrapper-sm green-800">@green-800</div>
        <div class="wrapper-sm green-900">@green-900</div>
        <div class="wrapper-sm green-A100">@green-A100</div>
        <div class="wrapper-sm green-A200">@green-A200</div>
        <div class="wrapper-sm green-A400">@green-A400</div>
        <div class="wrapper-sm green-A700">@green-A700</div>
      </div>
      <div class="col-sm-3">
        <div class="wrapper-sm light-green-500">
          <div class="m-b-lg">light-green</div>
          @light-green-500
        </div>
        <div class="wrapper-sm light-green-50">@light-green-50</div>
        <div class="wrapper-sm light-green-100">@light-green-100</div>
        <div class="wrapper-sm light-green-200">@light-green-200</div>
        <div class="wrapper-sm light-green-300">@light-green-300</div>
        <div class="wrapper-sm light-green-400">@light-green-400</div>
        <div class="wrapper-sm light-green-500">@light-green-500</div>
        <div class="wrapper-sm light-green-600">@light-green-600</div>
        <div class="wrapper-sm light-green-700">@light-green-700</div>
        <div class="wrapper-sm light-green-800">@light-green-800</div>
        <div class="wrapper-sm light-green-900">@light-green-900</div>
        <div class="wrapper-sm light-green-A100">@light-green-A100</div>
        <div class="wrapper-sm light-green-A200">@light-green-A200</div>
        <div class="wrapper-sm light-green-A400">@light-green-A400</div>
        <div class="wrapper-sm light-green-A700">@light-green-A700</div>
      </div>
      <div class="col-sm-3">
        <div class="wrapper-sm lime-500">
          <div class="m-b-lg">lime</div>
          @lime-500
        </div>
        <div class="wrapper-sm lime-50">@lime-50</div>
        <div class="wrapper-sm lime-100">@lime-100</div>
        <div class="wrapper-sm lime-200">@lime-200</div>
        <div class="wrapper-sm lime-300">@lime-300</div>
        <div class="wrapper-sm lime-400">@lime-400</div>
        <div class="wrapper-sm lime-500">@lime-500</div>
        <div class="wrapper-sm lime-600">@lime-600</div>
        <div class="wrapper-sm lime-700">@lime-700</div>
        <div class="wrapper-sm lime-800">@lime-800</div>
        <div class="wrapper-sm lime-900">@lime-900</div>
        <div class="wrapper-sm lime-A100">@lime-A100</div>
        <div class="wrapper-sm lime-A200">@lime-A200</div>
        <div class="wrapper-sm lime-A400">@lime-A400</div>
        <div class="wrapper-sm lime-A700">@lime-A700</div>
      </div>
    </div>
    <div class="row no-gutter m-b-lg">
      <div class="col-sm-3">
        <div class="wrapper-sm yellow-500">
          <div class="m-b-lg">yellow</div>
          @yellow-500
        </div>
        <div class="wrapper-sm yellow-50">@yellow-50</div>
        <div class="wrapper-sm yellow-100">@yellow-100</div>
        <div class="wrapper-sm yellow-200">@yellow-200</div>
        <div class="wrapper-sm yellow-300">@yellow-300</div>
        <div class="wrapper-sm yellow-400">@yellow-400</div>
        <div class="wrapper-sm yellow-500">@yellow-500</div>
        <div class="wrapper-sm yellow-600">@yellow-600</div>
        <div class="wrapper-sm yellow-700">@yellow-700</div>
        <div class="wrapper-sm yellow-800">@yellow-800</div>
        <div class="wrapper-sm yellow-900">@yellow-900</div>
        <div class="wrapper-sm yellow-A100">@yellow-A100</div>
        <div class="wrapper-sm yellow-A200">@yellow-A200</div>
        <div class="wrapper-sm yellow-A400">@yellow-A400</div>
        <div class="wrapper-sm yellow-A700">@yellow-A700</div>
      </div>
      <div class="col-sm-3">
        <div class="wrapper-sm amber-500">
          <div class="m-b-lg">amber</div>
          @amber-500
        </div>
        <div class="wrapper-sm amber-50">@amber-50</div>
        <div class="wrapper-sm amber-100">@amber-100</div>
        <div class="wrapper-sm amber-200">@amber-200</div>
        <div class="wrapper-sm amber-300">@amber-300</div>
        <div class="wrapper-sm amber-400">@amber-400</div>
        <div class="wrapper-sm amber-500">@amber-500</div>
        <div class="wrapper-sm amber-600">@amber-600</div>
        <div class="wrapper-sm amber-700">@amber-700</div>
        <div class="wrapper-sm amber-800">@amber-800</div>
        <div class="wrapper-sm amber-900">@amber-900</div>
        <div class="wrapper-sm amber-A100">@amber-A100</div>
        <div class="wrapper-sm amber-A200">@amber-A200</div>
        <div class="wrapper-sm amber-A400">@amber-A400</div>
        <div class="wrapper-sm amber-A700">@amber-A700</div>
      </div>
      <div class="col-sm-3">
        <div class="wrapper-sm orange-500">
          <div class="m-b-lg">orange</div>
          @orange-500
        </div>
        <div class="wrapper-sm orange-50">@orange-50</div>
        <div class="wrapper-sm orange-100">@orange-100</div>
        <div class="wrapper-sm orange-200">@orange-200</div>
        <div class="wrapper-sm orange-300">@orange-300</div>
        <div class="wrapper-sm orange-400">@orange-400</div>
        <div class="wrapper-sm orange-500">@orange-500</div>
        <div class="wrapper-sm orange-600">@orange-600</div>
        <div class="wrapper-sm orange-700">@orange-700</div>
        <div class="wrapper-sm orange-800">@orange-800</div>
        <div class="wrapper-sm orange-900">@orange-900</div>
        <div class="wrapper-sm orange-A100">@orange-A100</div>
        <div class="wrapper-sm orange-A200">@orange-A200</div>
        <div class="wrapper-sm orange-A400">@orange-A400</div>
        <div class="wrapper-sm orange-A700">@orange-A700</div>
      </div>
      <div class="col-sm-3">
        <div class="wrapper-sm deep-orange-500">
          <div class="m-b-lg">deep-orange</div>
          @deep-orange-500
        </div>
        <div class="wrapper-sm deep-orange-50">@deep-orange-50</div>
        <div class="wrapper-sm deep-orange-100">@deep-orange-100</div>
        <div class="wrapper-sm deep-orange-200">@deep-orange-200</div>
        <div class="wrapper-sm deep-orange-300">@deep-orange-300</div>
        <div class="wrapper-sm deep-orange-400">@deep-orange-400</div>
        <div class="wrapper-sm deep-orange-500">@deep-orange-500</div>
        <div class="wrapper-sm deep-orange-600">@deep-orange-600</div>
        <div class="wrapper-sm deep-orange-700">@deep-orange-700</div>
        <div class="wrapper-sm deep-orange-800">@deep-orange-800</div>
        <div class="wrapper-sm deep-orange-900">@deep-orange-900</div>
        <div class="wrapper-sm deep-orange-A100">@deep-orange-A100</div>
        <div class="wrapper-sm deep-orange-A200">@deep-orange-A200</div>
        <div class="wrapper-sm deep-orange-A400">@deep-orange-A400</div>
        <div class="wrapper-sm deep-orange-A700">@deep-orange-A700</div>
      </div>
    </div>
    <div class="row no-gutter">
      <div class="col-sm-3">
        <div class="wrapper-sm brown-500">
          <div class="m-b-lg">brown</div>
          @brown-500
        </div>
        <div class="wrapper-sm brown-50">@brown-50</div>
        <div class="wrapper-sm brown-100">@brown-100</div>
        <div class="wrapper-sm brown-200">@brown-200</div>
        <div class="wrapper-sm brown-300">@brown-300</div>
        <div class="wrapper-sm brown-400">@brown-400</div>
        <div class="wrapper-sm brown-500">@brown-500</div>
        <div class="wrapper-sm brown-600">@brown-600</div>
        <div class="wrapper-sm brown-700">@brown-700</div>
        <div class="wrapper-sm brown-800">@brown-800</div>
        <div class="wrapper-sm brown-900">@brown-900</div>
      </div>
      <div class="col-sm-3">
        <div class="wrapper-sm blue-grey-500">
          <div class="m-b-lg">blue-grey</div>
          @blue-grey-500
        </div>
        <div class="wrapper-sm blue-grey-50">@blue-grey-50</div>
        <div class="wrapper-sm blue-grey-100">@blue-grey-100</div>
        <div class="wrapper-sm blue-grey-200">@blue-grey-200</div>
        <div class="wrapper-sm blue-grey-300">@blue-grey-300</div>
        <div class="wrapper-sm blue-grey-400">@blue-grey-400</div>
        <div class="wrapper-sm blue-grey-500">@blue-grey-500</div>
        <div class="wrapper-sm blue-grey-600">@blue-grey-600</div>
        <div class="wrapper-sm blue-grey-700">@blue-grey-700</div>
        <div class="wrapper-sm blue-grey-800">@blue-grey-800</div>
        <div class="wrapper-sm blue-grey-900">@blue-grey-900</div>
      </div>
      <div class="col-sm-3">
        <div class="wrapper-sm grey-500">
          <div class="m-b-lg">grey</div>
          @grey-500
        </div>
        <div class="wrapper-sm grey-50">@grey-50</div>
        <div class="wrapper-sm grey-100">@grey-100</div>
        <div class="wrapper-sm grey-200">@grey-200</div>
        <div class="wrapper-sm grey-300">@grey-300</div>
        <div class="wrapper-sm grey-400">@grey-400</div>
        <div class="wrapper-sm grey-500">@grey-500</div>
        <div class="wrapper-sm grey-600">@grey-600</div>
        <div class="wrapper-sm grey-700">@grey-700</div>
        <div class="wrapper-sm grey-800">@grey-800</div>
        <div class="wrapper-sm grey-900">@grey-900</div>
      </div>
    </div>
  </div>
</div>
